---
title: useClipboard
package: "@chakra-ui/hooks"
---

`useClipboard` is a custom hook that handles copying content to clipboard.

## Return value

The `useClipboard` hook returns an object with the following fields:

| Name        | Type       | Default | Description                              |
| ----------- | ---------- | ------- | ---------------------------------------- |
| `value`     | `string`   |         | The copied value.                        |
| `onCopy`    | `function` |         | Callback function to copy content.       |
| `hasCopied` | `boolean`  | `false` | If `true`, the content has been copied . |

## Import

```js
import { useClipboard } from "@chakra-ui/react"
```

## Usage

```jsx
function Example() {
  const [value, setValue] = React.useState("Hello world")
  const { hasCopied, onCopy } = useClipboard(value)

  return (
    <>
      <Flex mb={2}>
        <Input value={value} isReadOnly placeholder="Welcome" />
        <Button onClick={onCopy} ml={2}>
          {hasCopied ? "Copied" : "Copy"}
        </Button>
      </Flex>
      <Editable placeholder="Paste here">
        <EditablePreview width="100%" />
        <EditableInput />
      </Editable>
    </>
  )
}
```
